<template>
  <div class="hello">
    <h1>{{$store.state.username}}</h1>
    <h1>{{$store.getters.newName}}</h1>
    <h1>{{$store.getters['newName']}}</h1>
    <button @click="mutationsFn">个性</button>

    <h2>=====================</h2>
    <h1>使用moduleA</h1>
    <h1>{{$store.state.moduleA.username}}</h1>
    <!-- <h1>{{$store.getters.moduleA.newName}}</h1> -->
    <h1>{{$store.getters.newName}}</h1>
    <h2>-=-=-=-=--=-=-=-=-=-=-=-=--</h2>
    <h2>{{$store.state.moduleB.username}}</h2>
    <h2>{{$store.getters['moduleB/newName']}}带命名空间的</h2>
    <button @click="moduleBmutations">moduleBmutations</button>
    <button @click="moduleBactions">moduleBactions</button>
    <h2>==================================</h2>
    <h2>vuex持久化</h2>
    <h2>npm i vuex-persistedstate</h2>
    <h3>{{$store.state.user.profile.account}}</h3>
    <button @click="$store.commit('user/setUser', {account:'zhangsan'})">测试用户信息</button>
    <h2>===================================</h2>
    <h2>npm i axios</h2>
    <button @click="fn">测试请求</button>
  </div>
</template>

<script>
import {useStore} from 'vuex'
import request from '@/utils/request'
export default {
  name: 'HelloWorld',
  setup(){
    //使用vuex仓库
    const store = useStore();
    //使用根模块state的数据
    console.log(store.state.username)
    //使用根模块getters的数据
    console.log(store.getters.newName)
    //提交根模块mutations
    store.commit('updateName')
    const mutationsFn = () => {
      //store.commit('updateName')
      store.dispatch('updateName')
    }
    const moduleBmutations = () => {
      //调用b模块
      store.commit('moduleB/updateName')
    }
    const moduleBactions = () => {
      store.dispatch('moduleB/updateName')
    }
    const fn = () => {
      //测试请求
      request('/member/profile', 'get')
    }
    return {mutationsFn, moduleBmutations, moduleBactions, fn}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

</style>
